<template>
  <el-dialog
    width="700px"
    title="excel导入"
    append-to-body
    :visible.sync="visible"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :before-close="handlerCloseDialog"
  >
<!--    :before-close="close"-->
    <div v-if="message" style="marginBottom:20px;color:#E6A23C;">温馨提示：{{message}}</div>
    <div style="text-align: center">
      <img src="/static/img/batch-add-excel.png"/>
      <div style="display: flex">
        <div style="flex: 1">
          <!--          <el-button type="primary">下载模板</el-button>-->
          <div
            v-if="id == 1"
            style="background: #409eff;width: 90px;height: 32px;margin-left: 140px;border-radius: 5px;line-height: 34px"
          >
            <a href="http://qiniu.yuzhekeji.top/file/xls/%E5%8D%95%E9%80%89%E9%A2%98.xls">
              <span style="color: white;font-size:12px;">下载模板</span>
            </a>
          </div>
          <div
            v-if="id == 2"
            style="background: #409eff;width: 90px;height: 32px;margin-left: 140px;border-radius: 5px;line-height: 34px"
          >
            <a href="http://qiniu.yuzhekeji.top/file/xls/%E5%88%A4%E6%96%AD%E9%A2%98.xls">
              <span style="color: white;font-size:12px;">下载模板</span>
            </a>
          </div>
          <div
            v-if="id == 3"
            style="background: #409eff;width: 90px;height: 32px;margin-left: 140px;border-radius: 5px;line-height: 34px"
          >
            <a href="http://qiniu.yuzhekeji.top/file/xls/%E5%A4%9A%E9%80%89%E9%A2%98.xls">
              <span style="color: white;font-size:12px;">下载模板</span>
            </a>
          </div>
          <!--          人员-->
          <div
            v-if="id == 4"
            style="background: #409eff;width: 90px;height: 32px;margin-left: 140px;border-radius: 5px;line-height: 34px"
          >
            <!--            <a-->
            <!--              href="http://qiniu.yuzhekeji.top/file/xls/%E4%BA%BA%E5%91%98%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xlsx"-->
            <!--            >-->
            <!--              <span style="color: white;font-size:12px;">下载模板</span>-->
            <!--            </a>-->
            <!--            <a-->
            <!--              href="http://qiniu.yuzhekeji.top/file/xls/%E5%A1%AB%E7%A9%BA%E9%A2%98.xls"-->
            <!--            >-->
            <a
              href="http://qiniu.yuzhekeji.top/file/xls/%E4%BA%BA%E5%91%98%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF%20.xlsx"
            >
              <span style="color: white;font-size:12px;">下载模板</span>
            </a>
          </div>
          <div
            v-if="id == 5"
            style="background: #409eff;width: 90px;height: 32px;margin-left: 140px;border-radius: 5px;line-height: 34px"
          >
            <a
              href="http://qiniu.yuzhekeji.top/file/xls/%E8%AF%81%E4%BB%B6%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xlsx"
            >
              <span style="color: white;font-size:12px;">下载模板</span>
            </a>
          </div>
          <!--           填空题-->
          <div
            v-if="id == -1"
            style="background: #409eff;width: 90px;height: 32px;margin-left: 140px;border-radius: 5px;line-height: 34px"
          >
            <a
              href="http://qiniu.yuzhekeji.top/file/xls/%E5%A1%AB%E7%A9%BA%E9%A2%98.xls"
            >
              <span style="color: white;font-size:12px;">下载模板</span>
            </a>
          </div>
          <div
            v-if="id == -2"
            style="background: #409eff;width: 90px;height: 32px;margin-left: 140px;border-radius: 5px;line-height: 34px"
          >
            <a
              href="http://qiniu.yuzhekeji.top/file/xls/%E9%97%AE%E7%AD%94%E9%A2%98.xls"
            >
              <span style="color: white;font-size:12px;">下载模板</span>
            </a>
          </div>
          <!--          批量导人-->
          <div
            v-if="id == 7"
            style="background: #409eff;width: 90px;height: 32px;margin-left: 140px;border-radius: 5px;line-height: 34px"
          >
            <a
              href="http://qiniu.yuzhekeji.top/file/xls/%E5%AF%BC%E5%85%A5%E4%BA%BA%E5%91%98%E6%A8%A1%E7%89%88.xlsx"
            >
              <span style="color: white;font-size:12px;">下载模板</span>
            </a>
          </div>
          <div
            v-if="id == 8"
            style="background: #409eff;width: 90px;height: 32px;margin-left: 140px;border-radius: 5px;line-height: 34px"
          >
            <!--              href="http://qiniu.yuzhekeji.top/file/xls/%E8%AE%BE%E5%A4%87%E5%8F%B0%E8%B4%A6%E6%A8%A1%E6%9D%BF.xlsx"-->
            <a
            href=" http://qiniu.yuzhekeji.top/file/xls/%E8%AE%BE%E5%A4%87%E5%8F%B0%E8%B4%A6%E6%A8%A1%E6%9D%BF.xlsx"
            >
              <span style="color: white;font-size:12px;">下载模板</span>
            </a>
          </div>
        </div>
        <div style="flex: 1" class="file-upload">
          <input
            name="upfile"
            ref="upfile"
            class="file-upload-input"
            id="upfile"
            type="file"
            accept=".xls, .xlsx"
            @change="handlerFileChange"
          />
          <el-button type="primary">上传excel</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      width="700px"
      title="选择试题导入的分类"
      :close-on-click-modal="false"
      :before-close="importTypeDialog"
      append-to-body
      :visible.sync="importTypeVisible"
    >
      <div class="import-box">
        <el-button type="primary" @click="importFile">开始导入</el-button>
        <el-button @click="importTypeDialog">取消</el-button>
      </div>
      <ul class="import-type">
        <li>
          <el-radio v-model="importForm.importType" :label="1">按模板分类导入</el-radio>
          <p>直接导入模板试题所指定的分类下</p>
        </li>
        <li>
          <el-radio v-model="importForm.importType" :label="2">按指定分类导入</el-radio>
          <p>您可以选中某个分类，模板中的所有试题将全部导入到这一个分类下面</p>
        </li>
        <li>
          <el-radio v-model="importForm.importType" :label="3">按模板分类导入成子分类</el-radio>
          <p>您可以选中某个分类，将模板分类导入成为他的子分类</p>
        </li>
      </ul>

      <paper-cate
        ref="paperCate"
        v-show="parseInt(importForm.importType) > 1"
        :setCurrent="setCurrent"
        :url="{
                                cateType: 2,
                                update:'/exam-admin/ques/cate/update',
                                save:'/exam-admin/ques/cate/save',
                                delete:'/exam-admin/ques/cate/delete',
                                tree:'/exam-admin/ques/cate/tree'
                                }"
      />
    </el-dialog>
    <el-dialog
      width="700px"
      title="检查试题查重导入"
      :close-on-click-modal="false"
      :before-close="importRepeatDialog"
      append-to-body
      :visible.sync="importRepeatVisible"
    >
      <el-alert
        v-if="importRepeatList.length"
        :title="`共${importRepeatList.length}道试题， 其中有${importRepeatList.filter(x=>x.repeatNum).length}道题已存在于题库中; 如果您想继续导入重复的试题，请点击下面列表中的试题使其变成蓝色`"
        type="success"
        :closable="false"
      />
      <ul class="import-repeat">
        <li
          v-for="(x,i) in importRepeatList"
          :key="i"
          v-if="parseInt(x.repeatNum) > 0"
          :class="{'import-no-repeat':!x.repeat}"
          @click="noRepeat(x)"
        >
          <span>第{{i+1}}题</span>
          <p>{{x.info}}</p>
          <el-tag :type="!x.repeat?'':'danger'" effect="dark">重复{{ x.repeatNum }}遍</el-tag>
        </li>
      </ul>
      <div class="import-repeat-box">
        <el-button type="info" @click="importRepeatFile('all')">导入所有试题</el-button>
        <el-button type="danger" @click="importRepeatDialog">取消</el-button>
        <el-button
          type="primary"
          @click="importRepeatFile"
          :disabled="!importRepeatList.filter(j=>parseInt(j.repeat) === 0).length"
        >
          导入
          {{importRepeatList.filter(j=>parseInt(j.repeat) === 0).length}}道题
        </el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import paperCate from './../../../views/modules/paper/papercate'

  export default {
    data() {
      return {
        importRepeatList: [],
        loading: '',
        id: '',
        visible: false,
        importTypeVisible: false,
        importRepeatVisible: false,
        importForm: {
          isImportAll: 1,
          quesIds: '',
          quesCateId: '',
          uuid: '',
          importType: 1
        }
      }
    },
    components: {paperCate},
    props: {
      url: String,
      message: {
        type: String,
        default: null
      }
    },
    methods: {
      noRepeat(item) {
        item.repeat = parseInt(item.repeat) === 1 ? 0 : 1
      },
      setCurrent(data) {
        this.importForm.quesCateId = data.id
      },
      init(id) {
        this.id = id
        this.visible = true
      },
      handlerFileChange() {
        if (parseInt(this.id) > 3) {
          this.importFile()
        }
        if (this.url) {
          this.loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.7)'
          })
          let _data = new FormData()
          _data.append('file', this.$refs.upfile.files[0])
          this.$http({
            url: this.$http.adornUrl(this.url),
            method: 'post',
            data: _data
          })
            .then(res => {
              if (parseInt(res.code) === 200) {
                this.importRepeatVisible = true
                this.$nextTick(_ => {
                  this.importRepeatList = res.data.quesList
                  this.importForm.uuid = res.data.uuid
                })
                this.loading.close()
              } else {
                this.$refs.upfile.value = ''
                this.$message.error(res.msg)
                this.$refs.batchImport.resetFile()
                this.loading.close()
              }
            })
            .catch(_ => {
              this.loading.close()
              this.$refs.upfile.value = ''
            })
        }
      },
      importFile() {
        if (parseInt(this.id) <= 3) {
          this.$emit('uploadFile', this.importForm)
        } else {
          this.$emit('uploadFile', this.$refs.upfile.files[0])
        }
        this.$refs.upfile.value = ''
      },
      importRepeatFile(val) {
        if (val === 'all') {
          this.importRepeatList.forEach(x => {
            x.repeat = 0
          })
          this.importForm.isImportAll = 1
        } else {
          if (this.importRepeatList.length) {
            if (
              this.importRepeatList.length ===
              this.importRepeatList.filter(x => parseInt(x.repeat) === 0).length
            ) {
              this.importForm.isImportAll = 1
            } else {
              this.importForm.quesIds = this.importRepeatList
                .filter(x => parseInt(x.repeat) === 0)
                .map(x => x.index)
                .join(',')
              this.importForm.isImportAll = 2
            }
          }
        }
        this.importRepeatDialog()
        this.importTypeVisible = true
        this.$nextTick(_ => this.$refs.paperCate.init())
      },
      handlerCloseDialog() {
        this.visible = false
        this.$refs.upfile.value = ''
      },
      importTypeDialog() {
        this.importTypeVisible = false
        this.importRepeatVisible = true
        this.$refs.upfile.value = ''
      },
      importRepeatDialog() {
        this.importRepeatVisible = false
        this.$refs.upfile.value = ''
      },
      resetFile() {
        this.$refs.upfile.value = ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  .file-upload {
    position: relative;
    overflow: hidden;
  }

  .file-upload-input {
    background-color: transparent;
    position: absolute;
    width: 90px;
    height: 120px;
    top: -30px;
    right: 120px;
    cursor: pointer;
  }

  .import-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .import-type {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;

    li {
      width: 100%;

      p {
        margin-top: 0;
        padding: 0 0 0 25px;
        color: #999;
      }
    }
  }

  .import-repeat {
    height: 50vh;
    overflow: auto;
    padding: 10px 20px;
    list-style-type: none;

    li {
      margin: 5px 0;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #333;
      border: 1px solid #ccc;

      &:hover {
        background: #e16a6a;
        color: #ccc;
      }

      & > p {
        flex: 1;
        margin: 0 10px;
      }

      &.import-no-repeat {
        background: #3f86e6;
        color: #fff;

        &:hover {
          background: #3f86e6;
        }
      }
    }
  }

  .import-repeat-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
</style>
